<template>
	<view>
		<u-sticky offset-top="0">
			<view class="top-s">
				<u-search :showAction="true" actionText="搜索" :animation="true"></u-search>
				<u-tabs :list="list" :scrollable='false' lineColor='rgb(46,167,128)' lineWidth='60'
					@click="click"></u-tabs>
			</view>
		</u-sticky>

		<view class="content">
			<view class="list" @click="handleNavToForm" v-for="(item,index) in 20">
				<view class="code">
					<u-tag text="新增" type="success"  ></u-tag>
				</view>
				<view class="name">
					巡检名称：区建筑倒塌
				</view>
				<view class="name">
					巡检任务：区建筑倒塌
				</view>
				<view class="name c">
					开始时间：区建筑倒塌
				</view>
				<view class="name c">
					巡检时间：区建筑倒塌
				</view>
				<view class="name c">
					结束时间：区建筑倒塌
				</view>
				<view class="time">
					<text>2024-09-09 14:22:33</text>
					<view class="r">
						xxx办公室
					</view>
				</view>
			</view>
		</view>
		
		
		<button type="primary" @click="handleNavToAdd" class="ad-btn">新增巡检任务</button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '待处理'
				}, {
					name: '审核中'
				}, {
					name: '已完成'
				}],
				current: 1
			}
		},
		methods: {
			sectionChange(index) {
				this.current = index;
			},
			handleNavToForm() {
				uni.navigateTo({
					url: '/pages/plan/planDetail/planDetail'
				})
			},
			handleNavToAdd(){
				uni.navigateTo({
					url:'/pages/plan/planAdd/planAdd'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100vh;
		background-color: $uni-color-bg;
	}

	.top-s {
		background-color: #fff;
		padding: 22upx 30upx;
		box-sizing: border-box;
	}

	.content {
		padding-bottom: 120upx;
		.list {
			padding: 22upx 30upx;
			box-sizing: border-box;
			background-color: #fff;
			font-size: 32upx;
			margin-bottom: 22upx;

			// border-bottom: 1upx solid $uni-border-color;
			.code {
				color: $uni-color-bg-z;
				display: flex;
			}

			.name {
				display: flex;
				padding: 12upx 0;
				font-size: 32upx;
			}
			.c{
				color: #999;
			}

			.desc {
				color: #666;
				font-size: 28upx;
			}

			.time {
				font-size: 26upx;
				color: #999;
				margin-top: 16upx;
				display: flex;
				align-items: center;

				.r {
					margin-left: auto;
				}
			}
		}
	}
	
	.ad-btn{
		position: fixed;
		bottom: 20upx;
		width: 80%;
		left: 50%;
		transform: translateX(-50%);
		background-color: $uni-color-bg-z;
	}
</style>